<template>
  <div class="container" :style="{ height: height }">
    <div class="summary-box">
      <div class="data-box">
        <div>
          <div class="text-box">
            <div class="text-city">
              <CountUp
                :end-val="StatisticData.townNum - 0"
                :duration="1.5"
              ></CountUp>
            </div>
            <span style="margin-top: 5px; display: inline-block"
              >乡镇街道（个）</span
            >
          </div>
        </div>

        <div>
          <div class="text-box">
            <div class="text-area">
              <CountUp
                :end-val="StatisticData.remodelBedNum - 0"
                :duration="1.5"
              ></CountUp>
            </div>
            <span style="margin-top: 5px; display: inline-block"
              >改造床位（张）</span
            >
          </div>
        </div>

        <div>
          <div class="text-box">
            <div class="text-member">
              <CountUp
                :end-val="StatisticData.communitySiteNum"
                :duration="2"
              ></CountUp>
            </div>
            <span style="margin-top: 5px; display: inline-block"
              >社区站点 (家)</span
            >
          </div>
        </div>
      </div>

      <div class="data-box">
        <div>
          <div class="text-box">
            <div class="text-sale1">
              <CountUp
                :end-val="StatisticData.remodelFee"
                :duration="2"
              ></CountUp>
            </div>
            <span>改造费用（万元）</span>
          </div>
        </div>

        <div>
          <div class="text-box">
            <div class="text-order">
              <CountUp
                :end-val="StatisticData.cumulativeWorkOrder"
                :duration="2"
              ></CountUp>
            </div>
            <span>累计工单 （单）</span>
          </div>
        </div>

        <div>
          <div class="text-box">
            <div class="text-sale">
              <CountUp
                :end-val="StatisticData.serviceFee"
                :duration="2"
              ></CountUp>
            </div>
            <span>服务费用（万元）</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import CountUp from "vue-countup-v3";
import { getDataStatistic } from '@/api/dataScreen/index';
export default {
  data() {
    return {
      height: '240px',
      StatisticData: {},
    };
  },
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    CountUp,
  },
  methods: {
    // 根据数值大小返回气泡的大小
    dataStatistic() {
      getDataStatistic().then((res) => {
        this.StatisticData = res.dataStatistic
      });
    },
  },
  mounted() {
    this.dataStatistic()
  },
  // watch: {
  //   isFullscreen: {
  //     handler(newValue, oldValue) {
  //       if (newValue == true) {
  //         this.height = '270px';
  //       } else {
  //         this.height = '240px';
  //       }
  //     },
  //   },
  // },
};
</script>
<style scoped lang="scss">
.container {
  //height: 240px;
  padding: 10px 20px;
  //background: #06073B;
  border-radius: 7px;
  box-shadow: rgb(8, 79, 160) 0px 0px 40px inset;
  border: 2px solid rgb(8, 79, 160);
  background-color: transparent;
  .title_container {
    display: flex;
    align-items: center;
  }

  .summary-box {
    box-sizing: border-box;
    height: 100%;
    // border: 1px solid red;
  }

  .data-box:nth-child(1) {
    //margin-top: 10px;
    margin-bottom: 10px;
  }

  .data-box {
    box-sizing: border-box;
    display: flex;
    & > div {
      position: relative;
      flex: 1;
      width: 200px;
      height: 100px;
      // border: 1px solid red;
      display: flex;
      flex-direction: row;
      // justify-content:center;
      align-items: center;
    }

    .text-box {
      box-sizing: border-box;
      // border: 1px solid orange;
      height: 50px;
      margin-left: 130px;
    }

    .text-box > span {
      color: #4fa6f7;
      font-size: 19px;
    }
  }

  div.text-city {
    color: #1cdbfe;
    font-family: dpFont;
    font-size: 33px;
    &::before {
      position: absolute;
      content: "";
      width: 75px;
      height: 75px;
      left: 50px;
      top: 20px;
      background-image: url("../../../assets/icons/city.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  div.text-area {
    color: #1cdbfe;
    font-family: dpFont;
    font-size: 33px;
    &::before {
      position: absolute;
      content: "";
      width: 75px;
      height: 75px;
      left: 50px;
      top: 20px;
      background-image: url("../../../assets/icons/RetrofitBed.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  div.text-shop {
    color: #1cdbfe;
    font-family: dpFont;
    font-size: 33px;
    &::before {
      position: absolute;
      content: "";
      width: 75px;
      height: 75px;
      left: 50px;
      top: 20px;
      background-image: url("../../../assets/icons/RetrofitBed.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  div.text-member {
    color: #1cdbfe;
    font-family: dpFont;
    font-size: 33px;
    &::before {
      position: absolute;
      content: "";
      width: 75px;
      height: 75px;
      left: 50px;
      top: 20px;
      background-image: url("../../../assets/icons/Community.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  div.text-order {
    color: #1cdbfe;
    font-family: dpFont;
    font-size: 33px;
    &::before {
      position: absolute;
      content: "";
      width: 75px;
      height: 75px;
      left: 50px;
      top: 20px;
      background-image: url("../../../assets/icons/totalorder.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
  div.text-sale1 {
    color: #1cdbfe;
    font-family: dpFont;
    font-size: 33px;
    &::before {
      position: absolute;
      content: "";
      width: 75px;
      height: 75px;
      left: 50px;
      top: 20px;
      background-image: url("../../../assets/icons/RenovationCosts.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
  div.text-sale {
    color: #1cdbfe;
    font-family: dpFont;
    font-size: 33px;
    &::before {
      position: absolute;
      content: "";
      width: 75px;
      height: 75px;
      left: 50px;
      top: 20px;
      background-image: url("../../../assets/icons/ServiceFees.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
}
</style>
